<template>
	<view>
		<view class="header">
			<uni-nav-bar dark background-color="#2477f4" title="维修任务" left-icon="left" @clickLeft="back"
				:border="false"></uni-nav-bar>
		</view>

		<view class="body">
			<view class="list">
				<view class="top">
					维修信息
				</view>
				<view class="info">
					<view>
						<text>维修单号:</text>
						<text>3535252</text>
					</view>
					<view>
						<text>车主姓名:</text>
						<text>张</text>
					</view>
					<view class="phone">
						<text>联系方式:</text>
						<text>17516204482</text>
						<view class="img">
							<image src="/static/电话.png" mode=""></image>
						</view>
						
					</view>
					<view>
						<text>维修方式:</text>
						<text>上门取车 / 到店维修</text>
					</view>
					<view class="addr">
						<text>取车位置:</text>
						<text>饭都花园21号</text>
						<view class="img">
							<image src="/static/plane.png" mode=""></image>
						</view>
						
					</view>
					<view>
						<text>预约日期:</text>
						<text>2022/11/10 12:00</text>
					</view>
					<view>
						<text>提交日期:</text>
						<text>2022/11/10 12:00</text>
					</view>
				</view>
			</view>
			
			<view class="list">
				<view class="top">
					车辆信息
				</view>
				<view class="info2">
					<view>
						<text>车辆类型:</text>
						<text>大客车</text>
					</view>
					<view>
						<text>车牌号:</text>
						<text>豫J45323</text>
					</view>
					<view>
						<text>整车照片:</text>
						<view>
						<image class="image" src="/static/c1.png"></image>
					    </view>
					</view>
					<view>
						<text>维修部位照片:</text>
						<view>
						<image class="image" src="/static/c1.png"></image>
						<image class="image" src="/static/c1.png"></image>
						<image class="image" src="/static/c1.png"></image>
					    </view>
					</view>
				</view>
			</view>

		</view>
		
		<view class="bottom">
			<view class="but">确认到场</view>
		</view>

	</view>
</template>

<script>
	export default {
		data() {
			return {

			}
		},
		methods: {
			back(){
				uni.navigateBack();
			},
		}
	}
</script>

<style>
	.status_bar {
		height: var(--status-bar-height);
		width: 100%;
	}

	.header {
		background: linear-gradient(#2979ff, #0662e6);
		height: 400rpx;
		padding-top: 20rpx;
	}

	h3 {
		text-align: center;
		color: #fff;
		font-size: 30rpx;
		font-weight: normal;
	}

	.body {
		margin-top: -170px;
		padding-bottom: 150px;

	}
	.top{
		padding: 20rpx 0;
		font-size: 34rpx
	}

	.list {
		background-color: #fff;
		border-radius: 15px;
		margin-top: -160px;
		padding: 10px 10px;
		margin: 0 10px;
		margin-top: 10px;

	}


	.top {
		font-weight: 600;
		border-bottom: solid 3px #efefef;

	}

	.info {
		margin-top: 10px;
		padding-bottom: 10px;
	}
	
	.phone{
		position: relative;
		
	}
	
	.addr{
		top: 0;
		right: 00rpx;
		position: relative;
	}
	
	.img{
		top: 0;
		position: absolute;
		right: 0rpx;
	}
	
	.img image{
		width: 30rpx;
		height: 30rpx;
	}
	

	.info view {
		margin-top: 5px;
	}
	
	.info>view>text:nth-child(1){
		padding-right: 20rpx;
	}
	.info2 {
		margin-top: 10px;
		padding-bottom: 10px;
	}
	
	.info2 view {
		margin-top: 5px;
	}
	
	.info2>view>text:nth-child(1){
		padding-right: 20rpx;
	}
	.image{
		width: 70px;
		height: 70px;
		background-color: #efefef;
		margin-right:10px ;
	}
	.bottom{
		margin: 0 auto;
		background-color: #0662e6;
		margin-top: -120px;
		width: 230px;
		text-align: center;
		height: 40px;
		line-height: 40px;
		color: #fff;
		border-radius: 50px;
		
	}
	
</style>